<template>
	<view class="container">
		<view class="user" v-if="state.userInfo">
			<image :src="state.userInfo? state.userInfo.avatar: '/static/img/user-none.png'" mode=""></image>
			<view class="user_right">
				<view class="name">{{state.userInfo?.nickname || '请完善个人资料'}}</view>
				<view class="sex">性别：{{ state.userInfo?.gender ==1? '男':state.userInfo?.gender ==2 ? '女':'未知'}}</view>
			</view>
		</view>
		<view class="user" v-else>
			<button @click="loginpopToggle" type="primary">登录</button>
		</view>
		<view class="title">
			常用功能
		</view>
		<view class="content" @tap="gotoUrl('resume')">
			<view class="content_left">
				<view class="content_title">
					<image src="/static/img/jianli.png" mode="widthFix"></image>
					我的简历
				</view>
				<view class="content_footer">（必填）</view>
			</view>
			<!-- <view class="content_right">
				未完成<u-icon name="arrow-right" color="#818181"></u-icon>
			</view> -->
		</view>
		<view class="content" @tap="gotoUrl('detail')">
			<view class="content_left">
				<view class="content_title">
					<image src="/static/img/xiangxi.png" mode="widthFix"></image>
					详细信息
				</view>
				<view class="content_footer">（选填）</view>
			</view>
			<!-- <view class="content_right">
				未完成<u-icon name="arrow-right" color="#818181"></u-icon>
			</view> -->
		</view>
		<u-popup v-model="state.loginShow" :border-radius="30" mode="bottom" closeable>
			<view class="pop_list">
				<button class="pop_image" open-type="chooseAvatar" @chooseavatar="getUserInfo">
					<image :src="state.loginInfo.avatarUrl ?? '/static/img/userlogin.png'" mode=""></image>
				</button>
				<input class="nickname-input" type="nickname" placeholder="请输入昵称" v-model="state.loginInfo.userName"
					@blur="getNickname" />
				<button style="width: 400rpx;margin-top: 40rpx;" type="primary" open-type="getPhoneNumber"
					@getphonenumber="loginSave">获取手机号登录</button>
			</view>
		</u-popup>
	</view>
	<Tabbar :value="1" />
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import Tabbar from '@/components/tabbar.vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { miniProgramOauth, userPhoneNumberBind, userIndex } from '@/common/api'
	const state = reactive({
		avatar: '/static/img/user-none.png',
		userInfo: null,
		loginInfo: {},
		loginShow: false,
	})
	const getUserInfo = (e) => {
		console.log(e)
		const { detail } = e
		uni.getFileSystemManager().readFile({
			filePath: detail.avatarUrl, //照片的临时地址
			encoding: "base64", //编码格式
			success: (res) => {
				let data = "data:image/jpg" + ";base64," + res.data //base64地址
				//后续操作
				state.loginInfo.avatarUrl = data
			},
		})
	}
	const getNickname = (e) => {
		console.log(e)
		state.loginInfo.userName = e.detail.value;
	}
	const loginSave = (e) => {
		console.log(e)
		if (e.detail.code) {
			uni.login({
				provider: 'weixin',
				success: async (loginRes) => {
					console.log(loginRes.code)
					const { data } = await miniProgramOauth({
						code: loginRes.code
					})
					console.log(data)
					uni.setStorageSync('token', data.token)
					if (data.register == 0) {
						const { data: datas } = await userPhoneNumberBind({
							token: data.token,
							nickname: state.loginInfo?.userName,
							avatar: state.loginInfo?.avatarUrl,
							code: e.detail.code
						})
						uni.setStorageSync('userinfo', datas.userinfo)
						uni.setStorageSync('token', datas.token)
						uni.setStorageSync('token_expire', datas.token_expire)
						state.userInfo = datas.userinfo
						state.loginShow = !state.loginShow
					} else {
						uni.setStorageSync('userinfo', data.userinfo)
						uni.setStorageSync('token_expire', data.token_expire)
						state.userInfo = uni.getStorageSync('userinfo')
						getUser()
					}
				}
			})
		} else {
		}

	}
	const loginpopToggle = () => {
		state.loginShow = true

	}
	onLoad(() => {
		state.userInfo = uni.getStorageSync('userinfo')
		getUser()
	})

	const getUser = async () => {
		const { data } = await userIndex({})
		console.log(data)
		state.userInfo = data.user
	}
	const gotoUrl = (url : string) => {
		if (!uni.getStorageSync('token')) {
			loginpopToggle()

		} else {
			uni.navigateTo({
				url: `/pages/mine/${url}/${url}`
			})
		}

	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		overflow: hidden;
	}

	.container {
		position: relative;
		width: 750rpx;
		font-family: PingFang-SC, PingFang-SC;
		height: 100%;
		padding: 20rpx 35rpx;
		box-sizing: border-box;
		overflow: hidden;

		.user {
			display: flex;
			background-color: #fff;
			padding: 35rpx 25rpx;
			box-sizing: border-box;
			align-items: center;
			box-shadow: rgba(0, 0, 0, 0.1) 0rpx 4rpx 6rpx -1px, rgba(0, 0, 0, 0.06) 0rpx 2rpx 4rpx -1rpx;
			border-radius: 8rpx;

			image {
				width: 185rpx;
				height: 185rpx;
				border-radius: 50%;
				margin-right: 25rpx;
			}

			.name {
				font-size: 32rpx;
				color: #282828;
				line-height: 51rpx;
			}

			.sex {
				font-size: 19rpx;
				color: #282828;
			}
		}

		.title {
			font-size: 28rpx;
			color: #282828;
			display: flex;
			align-items: center;
			padding: 35rpx 30rpx 25rpx;

			&::before {
				content: ' ';
				display: block;
				height: 28rpx;
				width: 4rpx;
				background-color: #3D69FE;
				margin-right: 10rpx;
			}
		}

		.content {
			display: flex;
			background-color: #fff;
			padding: 30rpx 20rpx;
			justify-content: space-between;
			align-items: center;
			box-shadow: rgba(0, 0, 0, 0.1) 0rpx 2rpx 3rpx -1rpx;
			border-radius: 8rpx;
			margin-bottom: 15rpx;

			&_left {

				image {
					width: 30rpx;
					height: 33rpx;
					margin-right: 10rpx;
				}

				.content_title {
					display: flex;
					align-items: center;
				}

				.content_footer {
					font-size: 24rpx;
					color: #818181;
					padding-left: 50rpx;
					margin-top: 5rpx;
				}
			}

			&_right {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #818181;
			}
		}


	}

	.pop_list {
		height: 50vh;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 50rpx;
		box-sizing: border-box;

		.pop_image {
			width: 200rpx;
			height: 200rpx;
			border: 0;
			margin: 0;
			padding: 0;
			background-color: #fff;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}

			&::after {
				border: 0;
			}
		}

		.nickname-input {
			width: 400rpx;
			border: 2rpx solid #dcdcdc;
			height: 64rpx;
			margin: 30rpx 0;
			padding-left: 20rpx;
		}

		.phone {
			display: flex;
			align-items: center;


		}
	}
</style>